<template>
  <!-- 选择站点和时间 -->
  <div>
    <Form inline
          :label-width="100">
      <FormItem>
        <Button type="info"
                size="small"
                @click="handleSelectChange()">导出报表</Button>
      </FormItem>
      <!-- <FormItem label="">
            <Select
              v-model="selectedData"
              >
              <Option
                v-for="item in report_type"
                :value="item.type"
                :key="item.type"
                @click="handleSelectChange"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem> -->

    </Form>
    <Modal v-model="isShowModal"
           title=""
           width="800"
           class-name="vertical-center-modal">
      <p slot="header"
         style="height:30px;line-height:30px;font-size:24px;">
        <span>请选择需要导出的类型</span>
      </p>

      <div style="height: 100%;">
        <div class='reportDate'>
          <p style="height:30px;line-height:30px;font-size:24px;">
            日期选择
          </p>

          <Radio-group v-model=group>
            <Radio style="zoom:200%;"
                   v-for="item in groupList"
                   :label="item.value"
                   :key="item.value">
              <span>{{item.label}}</span>
            </Radio>
          </Radio-group>
          <DatePicker v-if="group == 'day'"
                      v-model="queryTimeRange"
                      type="daterange"
                      placement="bottom-end"
                      placeholder="请选择日期">
          </DatePicker>
        </div>
        <Divider />
        <div>
          <p style="height:30px;line-height:30px;font-size:24px;">
            事件选择
          </p>

          <Checkbox-group v-model="exportEvent">
            <Checkbox style="zoom:200%;"
                      v-for="item in eventList"
                      :label="item.value"
                      :key="item.value">
            </Checkbox>
          </Checkbox-group>
        </div>
        <Divider />
        <div>
          <p style="height:30px;line-height:30px;font-size:24px;">
            道路选择
          </p>
          <Checkbox-group v-model="exportRoad">
            <Checkbox style="zoom:200%;"
                      v-for="item in stationList"
                      :label="item.id"
                      :key="item.id">
              <span>{{item.ch_name}}</span>
            </Checkbox>
          </Checkbox-group>
        </div>
      </div>
      <div slot="footer">
        <Button type="success"
                size="large"
                @click="exportExcel()">确定导出</Button>
        <iframe id="ifile"
                style="display:none"></iframe>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import dayjs from 'dayjs'
import constData from "@/util/constData";
import constData2 from "@/util/constData2";
import { exportExcelUrl, reqRoadsList } from '@/api';
export default {
  data() {
    return {
      isShowModal: false,
      group: 'today',
      queryTimeRange: ['', ''],
      groupList: [{ 'value': 'today', 'label': '本日' }, { 'value': 'week', 'label': '本周' },
      { 'value': 'month', 'label': '本月' }, { 'value': 'day', 'label': '指定日期' }],
      //selectedData:'road', 导出类型，road or event
      stationList: [], //所有道路列表
      // stationList: constData.stationList, //所有道路列表
      exportRoad: [], //导出道路列表
      eventList: [],//所有事件列表constData2.eventList
      exportEvent: [],//导出事件,
      //report_type: [{'type':'road','label':'按道路导出'},{'type':'event','label':'按事件类型导出'}],
    };
  },
  mounted() {
    this.initDatetime()
    this.initEventList()
    this.initRoadList()
  },
  methods: {
    initDatetime() {
      this.queryTimeRange[0] = dayjs()
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss"); //获取一天初
      this.queryTimeRange[1] = dayjs().format("YYYY-MM-DD 23:59:59");
    },
    initEventList() {
      let tmp = constData2.eventList
      let tmp_list = []
      for (var idx in tmp) {
        let item = tmp[idx]
        if (item.value != 'all')
          tmp_list.push(item)
      }
      this.eventList = tmp_list
    },
    async initRoadList() {
      let resData = await reqRoadsList();
      if (resData.code === 6000) {
        this.stationList = resData.data.roads
        console.log(">>>>>>>>>>", this.stationList)
      }
    },
    exportExcel() {
      let events = ''

      let road_name = ''
      for (var i = 0; i < this.exportRoad.length; i++) {
        if (i < this.exportRoad.length - 1)
          road_name += this.exportRoad[i] + ','
        else
          road_name += this.exportRoad[i]
      }

      let event_name = ''
      for (var i = 0; i < this.exportEvent.length; i++) {
        if (i < this.exportEvent.length - 1)
          event_name += this.exportEvent[i] + ','
        else
          event_name += this.exportEvent[i]
      }

      let start_time = dayjs(this.queryTimeRange[0]).format("YYYY-MM-DD 00:00:00")
      let end_time = dayjs(this.queryTimeRange[1]).format("YYYY-MM-DD 23:59:59")
      var dom = document.getElementById('ifile');
      let parmas = 'group=' + this.group + '&start_time=' + start_time + '&end_time=' + end_time + '&road_name=' + road_name + '&event_name=' + event_name
      console.log('export parmas:', parmas)
      dom.src = exportExcelUrl + "?" + parmas;
      this.isShowModal = false
      this.group = 'today'
      this.exportRoad = []
      this.exportEvent = []

    },
    handleSelectChange() {
      this.isShowModal = true
    }
  }
}
</script>
<style lang="less">
.mytabs {
  height: 6rem;
}
.mytabs .ivu-tabs .ivu-tabs-nav .ivu-tabs-tab-active {
  color: #fff !important;
}
.mytabs .ivu-tabs .ivu-tabs-tab {
  font-size: 1.4rem !important;
}
.ivu-radio-wrapper-checked {
  border-color: #000 !important;
  color: #000 !important;
}

@background-color: #fff !important;
@font-color: #ff0000 !important;
.reportDate .ivu-select-selection {
  width: 180px;
  height: 30px !important;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.reportDate .ivu-select-dropdown {
  background-color: @background-color;
  max-height: 300px;
}
.reportDate .ivu-input {
  font-size: 18px !important;
  color: #515a6e !important;
  background-color: #fff !important;
  width: 100%;
  height: 32px !important;
}
.reportDate .ivu-date-picker-cells-cell-selected em,
.reportDate .ivu-date-picker-cells-cell-selected:hover em {
  // color: #52c41a !important;
  color: #fff !important;
}
.reportDate .ivu-date-picker-cells-cell {
  background-color: #ffffff !important;
  color: #555555 !important;
}
.reportDate .ivu-date-picker-cells-cell-range:before {
  background-color: #cef4fd !important;
  // background-color: #52c41a !important;
}
.reportDate .ivu-date-picker-header-label {
  color: #555555 !important;
  font-size: 18px !important;
}
.reportDate .ivu-date-picker-cells {
  font-size: 18px !important;
}
</style>